<template>
	<view>

		<view class="page-body">
			<view class="page-section">

				<view class="photo">
					<image src="../../static/pay_ali.png"></image>
				</view>

				<view class="price">
					<input class="uni-input" type="number" @input="bindKeyInput" v-model="money" placeholder="￥：请输入存款金额" />
				</view>
				<view class="uni-grid-9">
					<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in grids" :key="index"
					 :class="index % 3 === 2 ? 'no-border-right' : ''" @tap="changeMoney(item)">
						<text class="uni-grid-9-text">{{ item }}</text>
					</view>
					<!-- <view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover">
						<text class="uni-grid-9-text">清除</text>
					</view> -->
				</view>
				<view class="btn-area">
					<button @tap="getOrderInfo(money)" class="text m-right m-top" style="flex: 1;" :loading="loading">
						快速支付
					</button>

				</view>
			</view>
		</view>
	</view>
</template>
<script>

	const duration = 2000;
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				title: '充值金额',
				providerList: [],
				loading: false,
				money: '',
				grids: ["10", "99", "199", "999", "1499", "1999", "2999", "4999"]
			}
		},
		onLoad: function() {
			// #ifdef MP-WEIXIN
			uni.showModal({
				content: "小程序支付正在申请中...",
				showCancel: false
			})
			return;
			// #endif

		},
		computed: mapState(['apiUrl', 'token']),
		methods: {
			async requestPayment(money) {
				let orderInfo = await this.getOrderInfo(money);
				console.log("得到订单信息", orderInfo);
				if (orderInfo.statusCode !== 200) {
					console.log("获得订单信息失败", orderInfo);
					uni.showModal({
						content: "获得订单信息失败",
						showCancel: false
					})
					return;
				}

			},
			getOrderInfo: function(money) {


				this.loading = true;
				//	console.log(requestUrl);
				const data = {
					type: 'alipay',
					token: this.token,
					money: money
				};
				uni.request({
					url: this.apiUrl + 'app/saoma',
					method: 'POST',
					data: data,
					success: (res) => {
						uni.showToast({
							title: '请求成功',
							icon: 'success',
							mask: true,
							duration: duration
						})
						//console.log('fail' + JSON.stringify(data));

						//console.log('request success', res.data.data.qrcodeurl.toLowerCase());
						let url = res.data.data.qrcodeurl.substring(5);
						this.redirectTo('https' + url);
					},
					fail: (err) => {
						console.log('request fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false
					}
				})

			},
			redirectTo: function(url) {
				// #ifdef APP-PLUS
				plus.runtime.openURL(url);
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					content: "请复制链接在浏览器里打开",
					showCancel: false
				})
				// #endif


			},
			bindKeyInput: function(e) {
				this.money = e.target.value
				console.log(this.money);

			},
			changeMoney: function(money) {
				this.money = money

			},
		}
	}
</script>

<style>
	.page {
		padding-top: 60upx;
	}

	page {
		background: #efeff4;
	}

	.photo {
		display: block;
		margin: 0 auto;
		text-align: center;
	}

	.photo image {
		height: 140upx;
		width: 420upx;
		padding-top: 35upx;
	}

	.page-section {
		width: 90%;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 35upx;
		padding-bottom: 35upx;
	}

	.price {
		text-align: center;
		position: relative;
		font-size: 40upx;
		line-height: 1;
		padding: 50upx 0upx;
	}
	.uni-input{
		padding-left:20upx ;
	}
	.uni-grid-9 {
		background: white;
		width: auto;
	}

	.uni-grid-9-item {
		width: 33.3%;
		height: 180rpx;
	}


	.uni-grid-9-text {
		line-height: 180rpx;
		height: auto;
		font-size: 60rpx
	}


	.rmbLogo {
		font-size: 40upx;
		top: 8upx;
		left: -40upx;
	}

	button {
		background-color: #007aff;
		color: #ffffff;
	}
</style>
